import React,{Component} from 'react';
import {Route,Link} from 'react-router-dom';
import connectRoute from '../../utils/connectRoute';
import asyncComponent from '../../utils/AsyncComponent';
import Detail from '../../containers/detail';
import HeadBack from '../../components/headBack';
import classData,{getClass} from '../../utils/localData/type';
import './style.scss'


const HDetail = connectRoute(Detail);
export default class extends Component {
    constructor(props){
        super(props)
        this.state={
            activeId:classData[0].id
        }
    }
    setActive(id){
     this.setState(()=>{
         return{
             activeId:id
         }
     })
    }
    clickItem(id){
        this.props.history.push('/home/itemClass/'+id);
    }
    render(){
        const {activeId}=this.state;
        return (<div className={'assortment'}>
            <HeadBack {...this.props} title={'分类'}></HeadBack>
            <ul className={'assortment_nav'}>
                {classData.map((item,index)=>{
                    return  <li key={item.id} onClick={()=>{this.setActive(item.id)}} className={activeId===item.id?'active':''}>{item.name}</li>
                })}

            </ul>
            <div className={'assortment_body'}>
                <ul>
                    {getClass(activeId).contentList.map((item,index)=>{
                        return <li key={item.id} onClick={()=>{this.clickItem(item.id)}}>
                            <img src={item.icon} alt=""/>
                            <p>{item.name}</p>
                        </li>
                    })}
                </ul>
            </div>
        </div>)
    }
}